<template>
  <div class="app-container pagination">
    <el-card>
      <div class="header">
        <router-link to="./remarks">
          <el-button type="warning" icon="el-icon-info">路线设置</el-button>
        </router-link>
        <router-link to="./add">
          <el-button type="primary" icon="el-icon-printer">添加路线</el-button>
        </router-link>
      </div>
      <ws-pagination v-model="pagination">
        <el-table-column prop="name" label="线路名称" min-width="150" header-align="center" align="center"/>
        <el-table-column prop="cayType" label="车型" min-width="120" header-align="center" align="center"/>
        <el-table-column prop="name" label="发车时间" min-width="180" header-align="center" align="center"/>
        <el-table-column prop="name" label="人数上限" min-width="120" header-align="center" align="center"/>
        <el-table-column prop="boardingPoint" label="出发地" min-width="240" header-align="center" align="center"/>
        <el-table-column prop="destination" label="目的地" min-width="240" header-align="center" align="center"/>
        <el-table-column prop="orderTime" label="票价" width="100" header-align="center" align="center"/>
        <el-table-column prop="orderTime" label="佣金" width="100" header-align="center" align="center"/>
        <el-table-column prop="orderTime" label="可售车票" width="120" header-align="center" align="center"/>
        <el-table-column label="状态" width="120" header-align="center" align="center" fixed="right">
          <template slot-scope="scope">
            <el-tag :type="scope.row['status']===0?'danger':'success'">
              {{ scope.row['status']===0?'已禁用':'已启用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160" header-align="center" align="center" fixed="right">
          <template slot-scope="scope">
            <!--详情-->
            <router-link :to="`./details?id=${scope['row']['id']}`">
              <el-button size="small" type="primary" icon="el-icon-search" circle/>
            </router-link>
            <!--编辑-->
            <router-link :to="`./edit?id=${scope['row']['id']}`">
              <el-button size="small" type="info" icon="el-icon-edit" circle/>
            </router-link>
            <!--删除-->
            <el-button size="small" type="danger" icon="el-icon-delete" circle @click="deleteRow(scope['row'])"/>
          </template>
        </el-table-column>
      </ws-pagination>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: 'RouteCarpoolList',
    components: {},
    data() {
      return {
        pagination: {}
      }
    },
    watch: {},
    created() {
      // 初始化分页器
      this.initPagination();
    },
    methods: {
      // 初始化分页器
      initPagination() {
        // 创建分页器
        this.pagination = new this.$pagination(async (...args) => {
          // 加载分页列表
          const result = await this.$service.adminApplicationThemeGetPageList({...args[0]});
          if (result.code !== 0) {
            return this.$message.error(result.msg || '系统错误');
          }
          return result;
        });
        // 加载分页数据
        this.pagination.load();
      },
      // 删除指定行
      deleteRow({id}) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          callback: async (confirm) => {
            if (confirm === 'confirm') {
              // 创建一级分类
              const result = await this.$service.adminApplicationThemeDel({id: id});
              if (result.code === 0) {
                this.$message.success(`删除成功~`);
                // 加载分页数据
                this.pagination.load();
              } else {
                this.$message.error(result.msg);
              }
            }
          }
        });
      },
      // 切换上下架状态
      changeStatus({id, status}) {
        this.$confirm(`你确定要${status === 1 ? '下架' : '上架'}这个应用模板吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          callback: async (confirm) => {
            if (confirm === 'confirm') {
              // 创建一级分类
              const result = await this.$service.adminApplicationThemeUpdateStatus({
                id: id,
                status: status === 1 ? 0 : 1
              });
              if (result.code === 0) {
                this.$message.success(`${status === 1 ? '下架' : '上架'}成功~`);
                // 加载分页数据
                this.pagination.load();
              } else {
                this.$message.error(result.msg);
              }
            }
          }
        });
      }
    }
  }
</script>
